<template>
  <div
  class="palette-end-node"
  :class="isActive? 'active-select-node' : ''"
  @dblclick="resetName"
  @click="selectElement"
  @mouseenter="edgeSelectElement">
    <div class="end-node-name">
      <div v-if="!isHidde"> {{ name }} </div>
      <div v-if="isHidde">
        <el-input v-model="name" type="textarea" rows="3" @blur="resetName"></el-input>
      </div>
    </div>
    <svg-icon icon-class="end" :size="4"></svg-icon>
  </div>
</template>
<script>
export default {
  name: 'EndNode',
  inject: ['getNode'],
  data() {
    return {
      id: null,
      name: '结束',
      isHidde: false,
      isActive: true,
      graph: null,
      selectNodeFun: null,
      parent: null
    }
  },
  mounted() {
    const node = this.getNode()
    if(!node) return
    // 监听节点属性值变化
    node.on('change:data', ({ current }) => {
      const { id, isActive,  graph, selectNodeFun, $parent} = current
      this.id = id
      this.isActive = isActive
      this.graph = graph
      this.selectNodeFun = selectNodeFun
      this.parent = $parent()
    })
  },
  watch: {
    isActive: {
      async handler(val) {
        if(val !== undefined ) {
          const node = this.getNode()
          if(!val) {
            node.prop('ports', null)
          }else {
            if(this.parent) {
              this.parent.setGraphNodePortsConfig(node)
              const portsNumber = node.getProp().attrs.portsNumber
              this.parent.createNodePortLayout(node, portsNumber)
            }
          }
        }
      }
    }
  },
  methods: {
    resetName() {
      this.isHidde = !this.isHidde
    },
    selectElement() {
           // 选择当前节点
      this.$antProcess.selectCurrentProcessNode(this.graph, this.id)

      // 取消选择的节点
      this.$antProcess.cancelNoCurrentSelectNode(this.graph, this.id)

      if(this.selectNodeFun && typeof this.selectNodeFun === 'function' ){
        this.selectNodeFun(this.id, this.graph, 'start')
      }
    },

    edgeSelectElement() {
      setTimeout(()=> {
        const node = this.parent.currentSelectNode
        const nodeType = node.prop('attrs/type')
        if(nodeType && nodeType === 'edge') return

        // 选择当前节点
        this.$antProcess.selectCurrentProcessNode(this.graph, this.id)
      }, 250)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/process.scss';

.palette-end-node {
  width: 66px;
  height: 67px;
  display: flex;
  justify-content: flex-start;

  .end-node-name {
    color: black;
    font-weight: 500;
    position: absolute;
    top: 40%;
    left: 5%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .svg-icon {
    color: #d71620;
    margin-top: 1px;
  }
}
</style>